<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-input
          v-model="dataForm.username"
          placeholder="手机号/账号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.campusId" placeholder="请选择校区">
          <el-option
            v-for="campus in campusList"
            :key="campus.campusId"
            :label="campus.campusName"
            :value="campus.campusId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.userType" placeholder="请选择用户类型">
          <el-option label="体验账号" :value="0"> </el-option>
          <el-option label="激活账号" :value="1"> </el-option>
          <el-option label="生成账号" :value="2"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button type="primary" @click="addOrUpdateHandle(0)">新增</el-button>
        <el-button type="primary" @click="addBatchHandle()"
          >自定义批量新增</el-button
        >
        <el-button type="primary" @click="addBatchUsersHandle()"
        >批量新增账号</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="dataList"
      stripe
      v-loading="dataListLoading"
      style="width: 100%"
    >
      <el-table-column prop="id" label="用户id" width="180"> </el-table-column>
      <el-table-column prop="mobile" label="手机号/账号" width="180">
      </el-table-column>
      <el-table-column prop="campusName" label="所属校区名称">
      </el-table-column>
      <el-table-column prop="userType" label="用户类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.userType == 0">体验账号</el-tag>
          <el-tag v-else-if="scope.row.userType == 1">激活账号</el-tag>
          <el-tag v-else>生成账号</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="danger">禁用</el-tag>
          <el-tag v-else>启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间"> </el-table-column>
      <el-table-column prop="stoptime" label="到期时间"> </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="getMacAddress(scope.row.id)"
            >查看</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="addOrUpdateHandle(1, scope.row.id)"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="deleteHandle(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- MAC地址 -->
    <el-dialog title="MAC地址" :visible.sync="dialogTableVisible">
      <el-switch
        v-model="macStatus"
        @change="onChange"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
      <el-table :data="macList" v-loading="macListLoading">
        <el-table-column
          property="macAddress"
          label="MAC地址"
          width="200"
        ></el-table-column>
        <el-table-column property="allow" label="解锁" width="200">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.allow"
              @change="onChange2($event, scope.row)"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="deleteMac(scope.row.id, scope.row.macId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 手动批量新增框 -->
    <el-dialog
      title="自定义批量新增"
      :close-on-click-modal="false"
      :visible.sync="batchvisible"
    >
      <el-form
        :model="userForm3"
        :rules="dataRule3"
        ref="userForm3"
        label-width="80px"
      >
        <el-form-item label="校区名称" prop="campusId">
          <el-select v-model="userForm3.campusId" placeholder="请选择校区">
            <el-option
              v-for="campus in campusList"
              :key="campus.campusId"
              :label="campus.campusName"
              :value="campus.campusId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="num">
          <el-select
            v-model="userForm3.num"
            placeholder="请选择新增用户数量"
            @change="selectChange"
          >
            <el-option label="5" :value="5"></el-option>
            <el-option label="10" :value="10"></el-option>
            <el-option label="20" :value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加账号" prop="accounts">
          <el-col
            :span="12"
            v-for="(item, index) in userForm3.accounts"
            :key="index"
          >
            <el-form-item :label="'账号' + (index + 1)" prop="checkDescribe">
              <el-input
                v-model="item.account"
                placeholder="请输入账号（数字或字母）"
                style="width: 12.8vw"
                @keyup.native="
                  item.account = item.account.replace(/[^a-zA-Z0-9]/g, '')
                "
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="账号密码" prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="userForm3.password"
            style="width: 200px"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="到期时间" prop="stoptime">
          <el-date-picker
            v-model="userForm3.stoptime"
            type="datetime"
            placeholder="选择到期时间"
            default-time="12:00:00"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="batchvisible = false">取消</el-button>
        <el-button type="primary" @click="userBatchFormSubmit()"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <!-- 新增框 -->
    <el-dialog
      title="新增"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form
        :model="userForm"
        :rules="dataRule"
        ref="userForm"
        label-width="80px"
      >
        <el-form-item label="校区名称" prop="campusId">
          <el-select v-model="userForm.campusId" placeholder="请选择校区">
            <el-option
              v-for="campus in campusList"
              :key="campus.campusId"
              :label="campus.campusName"
              :value="campus.campusId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="num">
          <el-input-number
            v-model="userForm.num"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="到期时间" prop="stoptime">
          <el-date-picker
            v-model="userForm.stoptime"
            type="datetime"
            placeholder="选择到期时间"
            default-time="12:00:00"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="userFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
    <!-- 批量添加账号  -->
    <el-dialog
    title="批量添加账号"
    :close-on-click-modal="false"
    :visible.sync="batchAddUserVisible"
    v-loading="dataListLoading"
  >
    <el-form
      :model="userForm4"
      :rules="dataRule4"
      ref="userForm4"
      label-width="80px"
    >
      <el-form-item label="校区名称" prop="campusId">
        <el-select v-model="userForm4.campusId" placeholder="请选择校区">
          <el-option
            v-for="campus in campusList"
            :key="campus.campusId"
            :label="campus.campusName"
            :value="campus.campusId"
          >
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="添加账户" prop="accounts">
          <div v-for="(item,i) in userForm4.accounts">
            <el-input
            v-model="item.mobile"
            placeholder="账号前缀（数字或字母）"
            style="width: 200px"
            />       
            <el-input
              v-model="item.start"
              placeholder="起始数值"
              style="width: 200px"
              />
            <el-input
              v-model="item.num"
              placeholder="数量"
              style="width: 200px"
            />
            <el-button circle icon="el-icon-plus" @click="addList()" v-if="userForm4.accounts.length-1==i"></el-button>
            <el-button circle icon="el-icon-minus" @click="subList(i)" v-if="userForm4.accounts.length!=1"></el-button>
        </div>
      </el-form-item>
      <el-form-item label="账号密码" prop="password">
        <el-input
          placeholder="请输入密码"
          v-model="userForm4.password"
          style="width: 200px"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="课本角色" size="mini" prop="roleList">
        <el-checkbox-group v-model="userForm4.roleList">
          <el-checkbox
            v-for="role in roleList"
            :key="role.id"
            :label="role.id"
            >{{ role.roleName }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="到期时间" prop="stoptime">
        <el-date-picker
          v-model="userForm4.stoptime"
          type="datetime"
          placeholder="选择到期时间"
          default-time="12:00:00"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="batchAddUserVisible = false">取消</el-button>
      <el-button type="primary" @click="userBatchUserSubmit()"
        >确定</el-button
      >
    </span>
  </el-dialog>

    <el-dialog
      title="修改"
      :close-on-click-modal="false"
      :visible.sync="visible2"
    >
      <el-form
        :model="userForm2"
        :rules="dataRule2"
        ref="userForm2"
        label-width="80px"
      >
        <el-form-item label="校区名称" prop="campusId">
          <el-select v-model="userForm2.campusId" placeholder="请选择校区">
            <el-option
              v-for="campus in campusList"
              :key="campus.campusId"
              :label="campus.campusName"
              :value="campus.campusId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="userForm2.mobile"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="userForm2.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="userForm2.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="到期时间" prop="stoptime">
          <el-date-picker
            v-model="userForm2.stoptime"
            type="datetime"
            placeholder="选择到期时间"
            default-time="12:00:00"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible2 = false">取消</el-button>
        <el-button type="primary" @click="userFormSubmit2()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import fileDownload from 'js-file-download'
export default {
  data() {
    var validateAccount = (rule, accounts, callback) => {
      var flag = false;
      for (let index in accounts) {
        if (accounts[index].account != "") {
          flag = true;
          break;
        }
      }
      if (flag) {
        callback();
      } else {
        callback(new Error("账号不能全为空"));
      }
    };
    // 校验账号格式
    var checkBatchUser = (rule, value, callback) => {
      value.forEach((item,index)=>{
        if(!item.mobile||!item.num||!item.start){
          return callback(new Error('不能为空'));
        }
        if (isNaN(Number(item.num,10))||isNaN(Number(item.start,10) )){
          return callback(new Error('请输入数字值'));
        }
      })
      callback()
      };
    return {
      macListLoading: false,
      visible: false,
      visible2: false,
      batchvisible: false,
      batchAddUserVisible:false,
      dialogTableVisible: false,
      dataList: [],
      macList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataForm: {
        username: "",
        campusId: null,
        userType: null,
      },
      userForm3: {
        num: 5,
        campusId: null,
        stoptime: "",
        accounts: [],
        password: "",
        accountsvo: [],
      },
      userForm4: {
        campusId:'',
        accounts:[{
          num: null,
          start:null,
          mobile:null,
        }
        ],
        stoptime:"",
        password: "",
        roleList:[]
      },
      roleList:[],
      userForm: {
        id: null,
        num: 1,
        campusId: null,
        stoptime: "",
      },
      userForm2: {
        id: null,
        mobile: "",
        password: "",
        macStatus: null,
        userType: null,
        status: null,
        campusId: null,
        createtime: "",
        stoptime: "",
      },
      userId: null,
      macStatus: null,
      campusList: [],
      dataRule3: {
        campusId: [
          { required: true, message: "校区名称不能为空", trigger: "blur" },
        ],
        num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
        stoptime: [
          { required: true, message: "到期时间不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        accounts: [
          { required: true, validator: validateAccount, trigger: "blur" },
        ],
      },
      dataRule4: {
        campusId: [
          { required: true, message:"校区名称不能为空", trigger: "blur" },
        ],
        accounts: [{ validator: checkBatchUser, trigger: "change" }],
      },
      dataRule: {
        campusId: [
          { required: true, message: "校区名称不能为空", trigger: "blur" },
        ],
        num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
        stoptime: [
          { required: true, message: "到期时间不能为空", trigger: "blur" },
        ],
      },
      dataRule2: {
        campusId: [
          { required: true, message: "校区名称不能为空", trigger: "blur" },
        ],
        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        stoptime: [
          { required: true, message: "到期时间不能为空", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  components: {},
  activated() {
    this.getDataList();
    this.getCampusList();
    this.getRole()
  },
  watch: {
    batchAddUserVisible:{
      handler(newValue, OldValue) {
        if(newValue == false){
        this.$refs['userForm4'].resetFields()
        this.userForm4 ={
          campusId:'',
          accounts:[{
            num: null,
            start:null,
            mobile:null,
          }
          ],
          password: "",
          roleList:[]
        }
    }
  }
}
},
  methods: {
    // 获取角色
    getRole(){
      this.$http({
        url: this.$http.adornUrl("/sf/bookrole/select"),
        method: "get",
        params: this.$http.adornParams(),
      }) .then(({ data }) => {
          this.roleList = data && data.code === 0 ? data.list : [];
        })
    },
    selectChange(value) {
      var arr = [];
      for (let i = 0; i < value; i++) {
        arr.push({ account: "" });
      }
      this.userForm3.accounts = arr;
    },
    // 获取用户分页数据
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sf/frontuser/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          username: this.dataForm.username,
          campusId: this.dataForm.campusId,
          userType: this.dataForm.userType,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.userPage.records;
          this.totalPage = data.userPage.total;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 获取所有校区
    getCampusList() {
      this.$http({
        url: this.$http.adornUrl("/sf/campus/getCampusList"),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data);
          this.campusList = data.campusList;
        } else {
          this.campusList = [];
        }
      });
    },
    // 开关MAC
    onChange(macStatus) {
      macStatus = macStatus ? 1 : 0;
      this.$http({
        url: this.$http.adornUrl(`/sf/frontuser/updateMacStatus`),
        method: "post",
        data: this.$http.adornData({ macStatus, id: this.userId }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    onChange2(allow, mac) {
      allow = allow ? 1 : 0;
      let count = 0;
      for(let i = 0; i < this.macList.length; i++) {
        if(this.macList[i].allow) {
          count++;
        }
      }
      if(allow && count > 2) {
        mac.allow = false;
        this.$message.error("只允许解锁两个");
        return;
      }
      this.$http({
        url: this.$http.adornUrl(`/sf/frontuser/updateAllow`),
        method: "post",
        data: this.$http.adornData({ macId: mac.macId, allow }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 根据用户id获取MAC地址
    getMacAddress(userId) {
      this.macListLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/sf/frontuser/getMacAddress/${userId}`),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data);
          this.macList = data.map[0].macId == null ? [] : data.map; // 用的左外连接
          this.macStatus = data.map[0].macStatus == 1;
          for(let i = 0; i < data.map.length; i++) {
            data.map[i].allow = data.map[i].allow == 1;
          }
          this.userId = data.map[0].id;
        } else {
          this.macList = [];
        }
        this.dialogTableVisible = true;
        this.macListLoading = false;
      });
    },
    //批量新增自定义用户表单提交
    userBatchFormSubmit() {
      for (let index in this.userForm3.accounts) {
        if (this.userForm3.accounts[index].account != "")
          this.userForm3.accountsvo[index] =
            this.userForm3.accounts[index].account;
      }
      // 表单验证
      this.$refs["userForm3"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/frontuser/savebatch`),
            method: "post",
            data: this.$http.adornData(this.userForm3, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              if (data.errorUsers != "") {
                this.$notify({
                  title: "以下账号已存在，请勿重复添加!",
                  dangerouslyUseHTMLString: true,
                  message: data.errorUsers,
                  duration: 0,
                });
              }
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$nextTick(() => {
                    this.$refs["userForm3"].resetFields();
                  });
                  this.batchvisible = false;
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    //批量新增自定义用户表单提交
    userBatchUserSubmit() {
      let formData =[]
      for (let index of this.userForm4.accounts) {
        let obj = {
          campusId:this.userForm4['campusId'],
          password:this.userForm4['password'],
          mobile:index['mobile'],
          num:index['num'],
          start:index['start'],
          stoptime:this.userForm4['stoptime'],
          bookRoleIds:this.userForm4['roleList']
        }
        formData.push(obj)
      }
      this.dataListLoading = true;
      this.$refs["userForm4"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/teacher/saveBatchTeacher`),
            method: "post",
            data: this.$http.adornData(formData, false),
          }).then(({ data }) => {
            if (data) {
              this.dataListLoading = false;
              fileDownload(data, '账号名单.txt')     
                    this.$message({
                        message: '下载成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                          this.batchAddUserVisible = false;
                          this.getDataList()
                        }
                    })
            } else {
              this.dataListLoading = false;
              this.batchAddUserVisible = false;
              this.$message.error(data.msg);
            }
          }).catch(error=>{
              this.dataListLoading = false;
              this.batchAddUserVisible = false;
              this.$message.error(data.msg);
          });
        }else{
          this.dataListLoading = false;
        }
      });
    },
    // 表单提交
    userFormSubmit() {
      // 表单验证
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/frontuser/save`),
            method: "post",
            data: this.$http.adornData(this.userForm, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$notify({
                    title: "请记下密码",
                    dangerouslyUseHTMLString: true,
                    message: data.userPwd,
                    duration: 0,
                  });
                  this.visible = false;
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    userFormSubmit2() {
      // 表单验证
      this.$refs["userForm2"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/frontuser/update`),
            method: "post",
            data: this.$http.adornData(this.userForm2, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible2 = false;
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    //自定义批量新增
    addBatchHandle() {
      // 新增
      this.selectChange(5);
      this.batchvisible = true;
    },
    //批量新增账号
    addBatchUsersHandle() {
            this.batchAddUserVisible = true;
    },
    
    // 新增或修改
    addOrUpdateHandle(type, userId) {
      if (type == 0) {
        // 新增
        // 重置表单
        this.$nextTick(() => {
          this.$refs["userForm"].resetFields();
        });
        this.visible = true;
      } else {
        // 修改
        this.$nextTick(() => {
          this.$refs["userForm2"].resetFields();
        });
        this.visible2 = true;
        this.$http({
          url: this.$http.adornUrl(`/sf/frontuser/info/${userId}`),
          method: "get",
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.userForm2 = data.frontUser;
            this.userForm2.password = "";
          }
        });
      }
    },
    // 删除MAC地址
    deleteMac(userId, macId) {
      this.$confirm(`确定对[MACid=${macId}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/sf/macaddress/delete"),
            method: "post",
            data: this.$http.adornData([macId], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getMacAddress(userId);
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 删除用户
    deleteHandle(userId) {
      this.$confirm(`确定对[用户id=${userId}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/sf/frontuser/delete"),
            method: "post",
            data: this.$http.adornData([userId], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 增加输入框
    addList(){
      this.userForm4.accounts.push({
          num: null,
          start:null,
          mobile:null,
        })
    },
    // 删除输入框
    subList(i){
      this.userForm4.accounts.splice(i,1)
    }
  },
};
</script>